<!--
PivotalMySQLWeb

Copyright (c) 2017-Present Pivotal Software, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Pivotal MySQL*Web - JDBC Connections</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMain}}" media="screen" />
    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMin}}" />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style>
        .navbar-brand
        {
            position: absolute;
            width: 100%;
            left: 0;
            margin: auto;
            margin-left: 48%;
        }
    </style>
</head>
<body>

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-left">
                <a href="#">
                    <img src="images/PVLG-PivotalMYSQLWeb-SM.png"
                         th:src="@{images/PVLG-PivotalMYSQLWeb-SM.png}"
                         alt="Brand" />
                </a>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right nav-pills">
                <li>
                    <a th:href="@{/home}">
                        <img src="images/b_home.png"
                             th:src="@{images/b_home.png}"
                             alt="Home"
                             border="0"/>
                        Home
                    </a>
                </li>
                <li>
                    <a th:href="@{/exit}">
                        <img src="images/s_loggoff.png"
                             th:src="@{images/s_loggoff.png}"
                             alt="Logout"
                             border="0"/>
                        Logout
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/prefs}">
                                <img src="images/b_props.png"
                                     th:src="@{images/b_props.png}"
                                     alt="Preferences"
                                     border="0"/>
                                Preferences
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/endpoints}">
                                <img src="images/s_notice.png"
                                     th:src="@{images/s_notice.png}"
                                     alt="Endpoints"
                                     border="0"/>
                                Heath Endpoints
                            </a>
                        </li>
                        <li>
                            <a href="http://docs.pivotal.io/p-mysql/1-7/" target="_new">
                                <img src="images/b_docs.png"
                                     th:src="@{images/b_docs.png}"
                                     alt="p-mysql docs"
                                     border="0"/>
                                p-mysql Doc
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/refresh}">
                                <img src="images/eye.png"
                                     th:src="@{images/eye.png}"
                                     alt="Refresh"
                                     border="0"/>
                                Refresh
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Schema Objects <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/tables}">
                                <img src="images/s_tbl.png"
                                     th:src="@{images/s_tbl.png}"
                                     alt="Tables"
                                     border="0"/>
                                Tables[<span th:text="${session.schemaMap.Table}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/views}">
                                <img src="images/b_views.png"
                                     th:src="@{images/b_views.png}"
                                     alt="Views"
                                     border="0"/>
                                Views[<span th:text="${session.schemaMap.View}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/indexes}">
                                <img src="images/b_index.png"
                                     th:src="@{images/b_index.png}"
                                     alt="Indexes"
                                     border="0"/>
                                Indexes[<span th:text="${session.schemaMap.Index}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/constraints}">
                                <img src="images/constraints.png"
                                     th:src="@{images/constraints.png}"
                                     alt="Constraints"
                                     border="0"/>
                                Constraints[<span th:text="${session.schemaMap.Constraint}" />]
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/query}">
                                <img src="images/b_sql.png"
                                     th:src="@{images/b_sql.png}"
                                     alt="SQL Worksheet"
                                     border="0"/>
                                SQL Worksheet
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Themes <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/selecttheme(theme='default')}">Default</a></li>
                        <li><a th:href="@{/selecttheme(theme='sandstone')}">Sandstone</a></li>
                        <li><a th:href="@{/selecttheme(theme='cyborg')}">Cyborg</a></li>
                        <li><a th:href="@{/selecttheme(theme='slate')}">Slate</a></li>
                        <li><a th:href="@{/selecttheme(theme='spacelab')}">Spacelab</a></li>
                    </ul>
                </li>
                <li class="dropdown" th:if="${session.servicesListSize > 0}">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Instances <b class="caret"></b></a>
                    <ul class="dropdown-menu" style="min-width: 300px;">
                        <div th:each="service : ${session.servicesList}">
                            <li><a th:href="@{/switchinstance(instanceType=${service.type},instanceName=${service.name})}">Switch to <span th:text="${service.name}" /></a></li>
                        </div>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <img src="images/b_usrlist.png"
                             th:src="@{images/b_usrlist.png}"
                             alt="Users"
                             border="0"/>
                        [User: <span th:text="${session.user} ? ${session.user} : 'Not Logged In'">Not Logged In</span>]
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
<!-- NAVBAR CODE END -->

<div class="bs-example">
    <div class="page-header">
        <h1>Pivotal MySQL*Web - <small>JDBC Connections</small></h1>
    </div>
</div>

<ul class="nav nav-tabs">
    <li>
        <a th:href="@{/home}">
            <img src="images/b_home.png"
                 th:src="@{images/b_home.png}"
                 alt="Home"
                 border="0"/>
            Home
        </a>
    </li>
    <li>
        <a th:href="@{/tables}">
            <img src="images/s_tbl.png"
                 th:src="@{images/s_tbl.png}"
                 alt="Tables"
                 border="0"/>
            Tables[<span th:text="${session.schemaMap.Table}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/views}">
            <img src="images/b_views.png"
                 th:src="@{images/b_views.png}"
                 alt="Views"
                 border="0"/>
            Views[<span th:text="${session.schemaMap.View}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/indexes}">
            <img src="images/b_index.png"
                 th:src="@{images/b_index.png}"
                 alt="Indexes"
                 border="0"/>
            Indexes[<span th:text="${session.schemaMap.Index}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/constraints}">
            <img src="images/constraints.png"
                 th:src="@{images/constraints.png}"
                 alt="Constraints"
                 border="0"/>
            Constraints[<span th:text="${session.schemaMap.Constraint}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/query}">
            <img src="images/b_sql.png"
                 th:src="@{images/b_sql.png}"
                 alt="SQL Worksheet"
                 border="0"/>
            SQL Worksheet
        </a>
    </li>
    <li class="active">
        <a th:href="@{/viewconmap}">
            <img src="images/Connection.gif"
                 th:src="@{images/Connection.gif}"
                 alt="View Connections"
                 border="0"/>
            Connections
        </a>
    </li>
    <li>
        <a th:href="@{/endpoints}">
            <img src="images/s_notice.png"
                 th:src="@{images/s_notice.png}"
                 alt="Endpoints"
                 border="0"/>
            Endpoints
        </a>
    </li>
    <li>
        <a th:href="@{/userinfo}">
            <img src="images/s_info.png"
                 th:src="@{images/s_info.png}"
                 alt="Information"
                 border="0"/>
            Information
        </a>
    </li>
    <li>
        <a th:href="@{/variables}">
            <img src="images/s_vars.png"
                 th:src="@{images/s_vars.png}"
                 alt="Database Variables"
                 border="0"/>
            Variables
        </a>
    </li>
</ul>

<br />
<div th:if="${saved != null}">
    <div class="alert alert-success fade in col-xs-12">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Success!</strong> <span th:text="${saved}" />
    </div>
</div>

<div class="col-xs-12">
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Success!</strong> Found <span th:text="${conmapsize}" /> JDBC Connections
    </div>
    <table class="table table-hover table-bordered table-striped table-condensed" id="table_results">
        <thead>
        <tr>
            <th style="text-align:center">No</th>
            <th style="text-align:center">Key</th>
            <th style="text-align:center">JDBC URL/Database Name</th>
            <th style="text-align:center">Username</th>
            <th style="text-align:center">Connected At</th>
            <th style="text-align:center">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item,iterStat : ${conmap}">
            <td style="text-align:center ">
                <span th:text="${iterStat.count}" />
            </td>
            <td style="text-align:center">
                <span th:text="${item.key}" />
            </td>
            <td style="text-align:center ">
                <span th:text="${session.autobound} ? ${session.autobound} : ${item.value.url}"/>
            </td>
            <td style="text-align:center">
                <span th:text="${item.value.schema}" />
            </td>
            <td style="text-align:center">
                <span th:text="${item.value.connectedAt}" />
            </td>
            <td style="text-align:center">
                <div th:if="${item.key != session.user_key}">
                    <div th:if="${session.autobound == null}">
                        <a th:href="@{/viewconmap(conMapAction='DELETE',key=${item.key})}">
                            <img src="images/b_drop.png"
                                 th:src="@{images/b_drop.png}"
                                 alt="Delete JDBC Connection"
                                 width="16" height="16"
                                 data-toggle="tooltip" title="Delete JDBC Connection"
                                 border="0"/>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="clearfix">
</div>

<div th:include="footer :: copy"></div>

</body>
</html>